import Taro, { useLoad, useResize } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import ArrawRightImg from '@/assets/images/arrow_right.png'
import { Space, VirtualList } from '@nutui/nutui-react-taro'
import { useEffect, useRef, useState } from 'react'
import TaskListItem from '../TaskListItem'

import './index.less'

export default function TaskList() {
  const [list, setList] = useState<string[]>([])
  const [pageNo, setPageNo] = useState(1)
  const isLoading = useRef(false)

  useLoad(() => {
    console.log('init', Taro)
  })

  useEffect(() => {
    getList()
  }, [pageNo])

  function getList() {
    const data: string[] = []
    const pageSize = 20
    for (let i = (pageNo - 1) * pageSize; i < pageNo * pageSize; i++) {
      const num = i > 9 ? i : `0${i}`
      data.push(`list${num}`)
    }
    setList((value) => {
      return [...value, ...data]
    })
    setTimeout(() => {
      isLoading.current = false
    }, 30)
  }

  function onScroll() {
    if (pageNo > 25 || isLoading.current) return
    isLoading.current = true
    setPageNo(pageNo + 1)
  }

  function renderListItem(data: any, index: number) {
    return <TaskListItem key={index} />
  }

  return (
    <View className='taskList'>
      <View className='header'>
        <Text>任务进度</Text>
        <Space align='center' className='moreWrapper'>
          <Text className='more'>更多 </Text>
          <Image src={ArrawRightImg} />
        </Space>
      </View>
      <View className='content'>
        <VirtualList
          containerHeight={300}
          itemHeight={80}
          list={list}
          itemRender={renderListItem}
          onScroll={onScroll}
        />
      </View>
    </View>
  )
}
